<template>
  <div class="goods-manager-container">
    <div class="manager-container-filter">
      <el-row>
        <el-col :span="6" class="filter-item">
          <el-row>
            <el-col :span="6">
              <div class="filter-item-label">
                <span>商品标题</span>
              </div>
            </el-col>
            <el-col :span="18">
              <el-input
                v-model="queryParam.name"
                prefix-icon="el-icon-edit"
                placeholder="商品标题"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="filter-item">
          <el-row>
            <el-col :span="6">
              <div class="filter-item-label">
                <span>商品ID</span>
              </div>
            </el-col>
            <el-col :span="18">
              <el-input
                v-model="queryParam.id"
                prefix-icon="el-icon-edit"
                placeholder="商品ID"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="filter-item">
          <el-row>
            <el-col :span="6">
              <div class="filter-item-label">
                <span>一级目录</span>
              </div>
            </el-col>
            <el-col :span="18">
              <el-input
                v-model="queryParam.categoryId"
                prefix-icon="el-icon-edit"
                placeholder="一级目录"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="filter-item">
          <el-row>
            <el-col :span="6">
              <div class="filter-item-label">
                <span>销量</span>
              </div>
            </el-col>
            <el-col :span="18">
              <el-input

                prefix-icon="el-icon-edit"
                placeholder="商品标题"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="filter-item">
          <el-row>
            <el-col :span="6">
              <div class="filter-item-label">
                <span>销量</span>
              </div>
            </el-col>
            <el-col :span="8">
              <el-input
                prefix-icon="el-icon-edit"
              />
            </el-col>
            <el-col :span="2" style="text-align: center;line-height: 36px;vertical-align: center">
              -
            </el-col>
            <el-col :span="8">
              <el-input
                prefix-icon="el-icon-edit"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="filter-item">
          <el-row>
            <el-col :span="6">
              <div class="filter-item-label">
                <span>库存</span>
              </div>
            </el-col>
            <el-col :span="8">
              <el-input
                prefix-icon="el-icon-edit"
              />
            </el-col>
            <el-col :span="2" style="text-align: center;line-height: 36px;vertical-align: center">
              -
            </el-col>
            <el-col :span="8">
              <el-input
                prefix-icon="el-icon-edit"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="filter-item">
          <div></div>
        </el-col>
        <el-col :span="6" class="filter-item" style="text-align: right">
          <el-button-group >
            <el-button type="primary">
              搜索
            </el-button>
            <el-button type="primary">
              重置
            </el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div>

    </div>
    <el-table
      v-loading="loading"
      :data="goodsList"
      stripe
      border
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="goods_name"
        fixed
        align="left"
        label="商品名称"
        width="400"
      />
      <el-table-column
        prop="goods_price"
        label="价格"
        align="left"
        width="85"
      />
      <el-table-column
        prop="goods_price"
        label="状态"
        align="left"
        width="85"
      />
      <el-table-column
        prop="goods_stock"
        label="库存"
        align="left"
        width="85"
      />
      <el-table-column
        prop="goods_sold"
        label="销量"
        align="left"
        width="85"
      />
      <el-table-column
        prop="create_time"
        label="创建时间"
        align="left"
        width="180"
      />
      <el-table-column
        fixed="right"
        width="200"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button-group style="    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;">
            <el-button type="text" style="padding: 0" @click="dialogVisible = true">编辑商品</el-button>
            <el-button type="text" style="padding: 0">立即上架</el-button>
            <el-button type="text" style="padding: 0">定时上架</el-button>
            <el-button type="text" style="padding: 0">复制链接</el-button>
          </el-button-group>

        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: flex-end">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParam.queryModel.current"
        :limit.sync="queryParam.queryModel.showCount"
        @pagination="getList" />
    </div>
    <goods-edit-dialog
      :dialogVisible.sync="dialogVisible"
    />
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {pageGoodsQuery} from '@/api/goods'
  import Pagination from '@/components/Pagination'
  import GoodsEditDialog from "./components/GoodsEditDialog"; // secondary package based on el-pagination
  export default {
    name: "GoodsManager",
    components: {GoodsEditDialog, Pagination },
    data(){
      return {
        loading:false,
        dialogVisible:false,
        goodsList:[{
          goods_name:"A"
        }],
        total:0,
        queryParam:{
          name:'',
          id:'',
          categoryId:'',
          stock:'',
          sold:'',
          queryModel:{
            showCount:20,
            current:1,
            sortName:"id",
            sortOrder:"asc"
          }
        }
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList(){
        pageGoodsQuery(this.queryParam).then(res=>{
          this.goodsList = res.data.records;
          this.queryParam.queryModel.current = res.data.current;
          this.queryParam.queryModel.showCount = res.data.size;
          this.total = res.data.total;
        })
      },
      sizeChange(currentSize) {
        this.$emit('size-change', currentSize)
      },
      currentChange(currentPage) {
        this.$emit('current-change', currentPage)
      },
    }
  }
</script>

<style scoped lang="scss">
  .goods-manager-container{
      padding: 20px;
    .manager-container-filter{
      margin-top: 10px;
      margin-bottom: 10px;
      .filter-item{
        margin-bottom: 10px;
        .filter-item-label{
          text-align: right;
          padding-top: 9px;
          padding-right: 9px;
        }
      }
    }
  }
</style>
